<template>
  <div data-spy="scroll" data-target="#navbar-scroll">
    <div id="preloader"></div>
    <div id="top"></div>
    <div id="menu">
      <nav class="navbar-wrapper navbar-default" role="">
        <div class="container">
          <div id="navbar-scroll" class="collapse navbar-collapse navbar-backyard navbar-right">
            <ul class="nav navbar-nav">
              <li><a  @click="natural" style="cursor: pointer;">自然风光</a></li>
              <li><a @click="nation" style="cursor: pointer;">壮乡风情</a></li>
              <li><a @click="food" style="cursor: pointer;">美食</a></li>
              <li><a @click="city" style="cursor: pointer;">城市</a></li>
              <li><a @click="anniversary">宣传片</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
    <div class="el-backtop" style="position: absolute; right: 60px;bottom: 50px">
      <a href="#top"><i class="el-icon-caret-top"></i></a>
    </div>
    <div class="fullscreen landing parallax" style="background-image:url('../../static/images/sanhe.jpg')" data-img-width="2000" data-img-height="1600" data-diff="100">
      <div class="overlay" >
        <div class="container">
          <div class="row">
            <div class="col-md-7">
              <div >
<!--                <a @click="anniversary" style="line-height: 42px;text-transform: uppercase;font-weight: 600;cursor: pointer;font-size: 16px;color:#70c745;font-weight: 600;background-color:transparent;box-shadow: none;text-decoration: none;outline: 0 solid transparent;">宣传片</a>-->
              </div>
              <div class="landing-text wow fadeInUp" style="visibility: visible;animation-name: fadeInUp;height: 300px;">
              </div>
              <h1 class="wow fadeInLeft">
                同庆祝，共繁荣
              </h1>
              <div class="landing-text wow fadeInUp">
                <p>广西，一个画中的地方</p>
              </div>
            </div>
            	</div>
        </div>
      </div>
    </div>
    <div id="intro">
      <div class="container">
        <div class="row">
          <div class="col-md-6 intro-pic wow slideInLeft">
            <img src="../../static/images/sanhe2.jpg" alt="image" class="img-responsive">
          </div>
          <div class="col-md-6 wow slideInRight">
            <h2>桂林山水甲天下！</h2>
            <p>典型的喀斯特地形构成了别具一格的桂林山水，<a href="#">桂林</a>山水所指的范围很广，项目繁多。桂林山水一向以山青、水秀、洞奇、石美而享有“山水甲天下”的美誉，桂林山水包括山、水、喀斯特岩洞、石刻等等。桂林山水中，又以漓江流经阳朔的那一段最为美丽，故而有“桂林山水甲天下，阳朔山水甲桂林”之美誉 。
            </p>
            <div class="btn-section"><a href="" @click="natural" class="btn-default">了解更多广西自然风光</a></div>
          </div>
        </div>
      </div>
    </div>
    <div id="feature">
      <div class="container">
        <div class="row">
          <div class="col-md-10 col-md-offset-1 col-sm-12 text-center feature-title">
            <h2>广西，可不止只有壮族</h2>
            <p>广西少数民族有壮、瑶、苗、侗、仫佬、毛南、回、京、彝、水、仡佬族合计11个</p>
          </div>
        </div>
        <div class="row row-feat">
          <div class="col-md-4 text-center">

            <div class="feature-img">
              <img src="../../static/images/sanyuesan.jpg" alt="image" class="img-responsive wow fadeInLeft">
            </div>
          </div>
          <div class="col-md-8">
            <div class="col-sm-6 feat-list wow fadeInUp">
              <i class="pe-7s-notebook pe-5x pe-va "></i>
              <div class="inner">
                <h4>壮族</h4>
                <p>1482万人，占广西人口的33%，是全国55个少数民族中人口最多的民族，壮族为广西的土著民族。主要分布于南宁、百色、河池、柳州4个地市。
                </p>
              </div>
            </div>
            <div class="col-sm-6 feat-list wow fadeInUp">
              <i class="pe-7s-cash pe-5x pe-va " data-wow-delay="0.2s"></i>
              <div class="inner">
                <h4>瑶族</h4>
                <p>134.9万人，占全国瑶族人口62%，占广西人口3%。瑶族在广西分布广泛，全自治区88个县市中有1000人以上者达60个县市。</p>
              </div>
            </div>

            <div class="col-sm-6 feat-list wow fadeInUp">
              <i class="pe-7s-cart pe-5x pe-va p" data-wow-delay="0.4s"></i>
              <div class="inner">
                <h4>苗族</h4>
                <p>广西苗族人口42.3万人，占全国苗族人口5.5%，占广西人口1%。广西苗族主要分布在桂北、桂西北高山大岭地区，最大聚居地是融水苗族自治县。</p>
              </div>
            </div>
            <div class="col-sm-6 feat-list wow fadeInUp">
              <i class="pe-7s-users pe-5x pe-va" data-wow-delay="0.6s"></i>
              <div class="inner">
                <h4>侗族</h4>
                <p> 广西侗族人口29.87万人，占广西总人口0.66%。侗族是广西的土著民族。主要分布在三江、融水、龙胜3个自治县和罗城仫佬族自治县。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="feature-2">
      <div class="container">
        <div class="row">
          <div class="col-md-6 wow fadeInLeft">
            <h2>广西美食的魅力</h2>
            <p>陆川扣肉是广西陆川县名特产之一，选用中国八大名猪之一的陆川猪猪肉，肥而不腻，瘦而不柴，上口即化，不见锋棱；肉香温温润润，含蓄自敛，厚而绵，浓而远，热香袭人，肉味不走半点偏锋；表面酥红晶亮，可谓“炉香乍热，法界蒙薰，诸佛现金身”的诱惑美味。
            </p>
            <div class="btn-section"><a @click="food" class="btn-default">了解更多</a></div>
          </div>
          <div class="col-md-6 feature-2-pic wow fadeInRight">
            <img src="../../static/images/korou.jpg" class="img-responsive">
          </div>
        </div>
      </div>
    </div>
    <div id="download">
      <div class="action fullscreen parallax" style="background-image:url('../../static/images/city.jpg');" data-img-width="2000" data-img-height="1333" data-diff="100">
        <div class="overlay">
          <div class="container">
            <div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
              <h2 class="wow fadeInRight">想要了解广西有哪些城市吗？</h2>
              <p class="download-text wow fadeInLeft">截至2016年，广西辖14个地级市，县级行政区111个（包括40个市辖区、8个县级市、52个县、12个自治县），乡级行政区1247个（包括120个街道、722个镇、346个乡、59个民族乡）。自治区政府驻地南宁市民生路2号。</p>
              <div class="download-cta wow fadeInLeft">
                <a @click="city" class="btn-secondary">了解一下</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="testi">
      <div class="container">
        <div class="text-center">
          <h2 class="wow fadeInLeft">广西近年的发展</h2>
          <div class="title-line wow fadeInRight"></div>
        </div>
        <div class="row">
          <div class="col-sm-10 col-sm-offset-1">
            <div id="owl-testi" class="owl-carousel owl-theme wow fadeInUp">

              <div class="testi-item">
                <div class="client-pic text-center">
                  <img src="../../static/images/family.png" alt="client">
                </div>
                <div class="box">
                  <p class="message text-center">2017全区经济总量达到了2万亿，是1958年的832倍。财政总收入从1958年的4.66亿元增长到2017年的2600亿元，年均增长11.3%</p>
                </div>
              </div>
              <div class="testi-item">
                <div class="client-pic text-center">
                  <img src="../../static/images/shu.png" >
                </div>
                <div class="box">
                  <p class="message text-center">固定资产投资也达到了2万多亿元，比1958年翻了12.5番。高铁，动车通达全国15个省会的城市，在自治区内部有12个设区市通达了高铁动车。还有89%的县通了高速公路，城乡面貌发生了历史性巨变，城镇率达到了49.2%</p>
                </div>
              </div>
              <div class="testi-item">
                <div class="client-pic text-center">
                  <img src="../../static/images/2017nian.png" >
                </div>
                <div class="box">
                  <footer id="footer">
                    <div class="container">
                      <div class="col-sm-4 col-sm-offset-4">
                        <div class="social text-center"> </div>
                        <div class="text-center wow fadeInUp" style="font-size: 14px;">2019.12.3
                          <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                            <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(255,0,0);stroke-width:2" />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </footer>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


    export default {
    methods:{
      index(){
        this.$router.push('/');
      },
      natural(){
        this.$router.push('/natural');
      },
      city(){
        this.$router.push('/city');
      },
      nation(){
        this.$router.push('/nation');
      },
      food(){
        this.$router.push('/food');
      },
      anniversary(){
        this.$router.push('/anniversary');
      }
    }
    }
</script>

<style scoped>
  .fadeInUp{
    -webkit-animation-name:fadeInUp;animation-name:fadeInUp
  }
  @-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0)}}

  .fadeInRight{
    -webkit-animation-name:fadeInRight;
    animation-name:fadeInRight
  }
  @-webkit-keyframes fadeInRightBig{
    0%{
      opacity:0;-webkit-transform:translate3d(2000px,0,0);
    transform:translate3d(2000px,0,0)
    }100%{
           opacity:1;-webkit-transform:none;transform:none
         }
  }
</style>
